<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

		<title>User Center</title>
		<link href="../css/custom-theme/jquery-ui-1.8.21.custom.css" type="text/css" rel="stylesheet"/>
		<link href="../css/usercenterf.css" type="text/css" rel="stylesheet"/>
		<script type="text/javascript" src="../js/jquery1.7.2.js"></script>
        <script src="../js/jquery-ui-1.8.20.custom.min.js"></script>
		 <script type="text/javascript">
		 var timer=0;
		$(function() {
		$( "#dropdown" ).mouseenter(function(){
			clearTimeout(timer);
			//alert(timer);
			$("#dropdownmenu").slideDown(200);
		});
		$("#dropdown").mouseleave(function(){
			timer = setTimeout(function(){$("#dropdownmenu").slideUp(200);},500);
		});
	});
		 </script>
	</head>

	<body>
		<div id="header">
			<div class="container">
				<a id="logo" href="#">igator</a>
				<div class="seperate"></div>
				<div id="menu">
					<ul>
						<li>
							<a href="index.html">HOME</a> 
						</li>
						<li id="dropdown">
							<a href="#" id="channel">CHANNEL</a> 
							<ul id="dropdownmenu" style="display: none;">
								<li><a href="">BUY/SELL BOOK</a></li>
								<li><a href="">CLUB&ORGANIZATIONS</a></li>
								<li><a href="list.html">DINING</a></li>
								<li><a href="">GRADE YOUR PROFESSORS</a></li>
								<li><a href="">ROOMATE MATCHINE</a></li>
								<li><a href="">ABOUT US</a></li>
							</ul>
						</li>
					</ul>
				</div>
				<div class="ucenter">
						<span class="uleft"></span>
						<div class="ucbody">Welcome Jason | <a href="usercenter.html">user center</a> | <a href="#">log out</a></div>
						<span class="uright"></span>
					</div>

			</div>
		</div>
		<div class="container">
			<div class="banner">
				<div class="usermenu">
					<ul>
						<li><a href="index.html">Index</a></li>
						<li><a href="usercenterf.html">Marks</a></li>
						<li><a href="usercenterf.html" class="selected">Favorite</a></li>
					</ul>
				</div>
			</div>



		<div class="listbody" id="listbody">
			<div class="list">
				<ul class="one"><img src="img/xf.gif" width="72" height="72" /></ul>
				<ul class="two">
					<li class="tx1">Dry mashroom<span class="ts">(American)</span><span class="tel"><img src="img/tel.png" width="18" height="12" />2344890</span></li>
					<li class="tx2"><span class="ptt">Address:</span> 401 Poydras Street, New Orleans, LA</li>
					<li class="tx3"><span class="ptt">Atmosphere:</span> Friends dinner, Leisure snacks </li>
					<li class="tx4"><span class="ptt">Recommend dishes:</span> Fried dry mashroom, mashroom pizza</li>
				</ul>
				<ul class="three"><img src="img/5star.gif" />(5 marks)</ul>
				<ul class="four">$12</ul>
				<ul class="listdetail">
					<li class="de1"><span class="ptt">Description:</span></li>
					<li class="de2">Fried dry mashroom, mashroom pizzaFried dry mashroom, mashroom pizzaFried dry mashroom, mashroom pizzaFried dry mashroom, mashroom pizzaFried dry mashroom, mashroom pizzaFried dry mashroom, mashroom pizzaFried dry mashroom, mashroom pizzaFried dry mashroom, mashroom pizza</li>
					<li class="de3"><span class="ptt">Address:</span> 401 Poydras Street, New Orleans, LA</li>
					<li class="de4"><span class="ptt">Atmosphere:</span> Friends dinner, Leisure snacks </li>
					<li class="de5"><span class="ptt">Recommend dishes:</span> Fried dry mashroom, mashroom pizza</li>
				</ul>
				<ul class="bar clearfix"><span class="rtipt"><a href="javascript:;" onclick="givemark(1);">Give a mark</a> | <a href="#">Remove favorites</a> | <a href="#">Map</a>  <img style="margin-left:20px" src="img/facebook_blue.png" />  <img src="img/tweet_blue.png" /> </span><a href="javascript:;" class="showdetail">Detail <img src="img/arrow-270-small-icon.png" class="ar" /></a></ul>
			</div>
			<div class="pagebar"><span class="current">1</span><a href="javascript:;">2</a><a href="javascript:;">3</a><span>....</span><a href="javascript:;">>Next</a></div>
		</div><!--list-->
<script type="text/javascript">
function givemark(id){$("#givemark").dialog({
	modal:true,
	resizable: false,
	title: "Give a mark",
	width: 460,
	buttons: [
		{
			text: "Submit",
			click: function() { $(this).dialog("close"); }
		},
		{
			text: "Cancel",
			click: function() { $(this).dialog("close"); }
		}
	]
	});
}
$(".showdetail").click(function(){
	var isshow = $(this).parents('div.list').find('ul.listdetail').is(":visible");
	if(isshow){
		$(this).find('img').attr('src','img/arrow-270-small-icon.png');
		$(this).parents('div.list').find('ul.listdetail').slideUp();
	}else{
		$(this).find('img').attr('src','img/arrow-090-small-icon.png');
		$(this).parents('div.list').find('ul.listdetail').slideDown();
	}
})
$("#listbody div.list").hover(
	function(){$(this).addClass('listhover');$(this).find(".bar").css('visibility','visible');},
	function(){$(this).removeClass('listhover');$(this).find(".bar").css('visibility','hidden');}
);
</script>

	</div>
<!--dialog-->
<div id="givemark" style="display:none">
	<span>Overall assessment: </span>
	<span class="starbar">
	<a href="javascript:;" class="starsbar" onfocus="this.blur();" star="1">&nbsp;</a>
	<a href="javascript:;" class="starsbar" onfocus="this.blur();" star="2">&nbsp;</a>
	<a href="javascript:;" class="starsbar" onfocus="this.blur();" star="3">&nbsp;</a>
	<a href="javascript:;" class="starsbar" onfocus="this.blur();" star="4">&nbsp;</a>
	<a href="javascript:;" class="starsbar" onfocus="this.blur();" star="5">&nbsp;</a>
	</span>
	<span>Clcik stars to give a mark</span>
</div>
<script type="text/javascript">
$(".starbar a").hover(
	function(){
		var star = $(this).attr('star');
		$('.starbar').addClass("starbar"+star);
	},
	function(){
		var star = $(this).attr('star');
		$('.starbar').removeClass("starbar"+star);
	}
)
</script>
<!--dialog-->


		<div id="footer">
			<div class="container">
				<p>Igator&copy;Copyright 2012. All Rights Reserved.</p>
				<div id="social">
				<a id="facebook" href="#"></a>
				<a id="tweet" href="#"></a>
			</div>
			</div>
		</div>
	</body>
</html>
